<!--  -->
<template>
  <div class="answer-notes">
    <div class="chose-course-top">
      <div class="header-left">
        <span
            class="back-arrow"
            @click="() => this.$router.push({
                path:'/reverse/grammar-sentence',
               query:{
                   userId:this.reverseStatus.userId
               }
            })"
        ></span>
      </div>
      <div class="course-title">
        答题分析
      </div>
      <!-- <div class="blank"></div> -->
    </div>
    <div class="answer-wrap">
      <p class="chapter-title">
        <!--        {{ reverseStatus.pack_name }} · {{ reverseStatus.name }}-->
        标题
      </p>
      <section class="answer-result" v-if="answer.pinfo">
        <div class="result-item">
          <span>答对题数</span>
          <span >{{ answer.pinfo.successNum }}/{{ answer.list.length  }}</span>
        </div>
        <div class="result-item">
          <span>正确率</span>
          <span>{{ answer.pinfo.accuracy }}%</span>
        </div>
        <div class="result-item">
          <span>答题用时</span>
          <span>{{ answer.pinfo.time }}</span>
        </div>
      </section>
      <section class="yxp-info">
<!--        <div class="yxp-credit">-->
<!--          <img alt="" src="@/assets/reverse/credit.png"/>-->
<!--          <span>+{{ answer.credit }}学分</span>-->
<!--        </div>-->
<!--        <div class="yxp-diamond">-->
<!--          <img alt="" src="@/assets/reverse/diamond.png"/>-->
<!--          <span>+{{ answer.diamond }}学币</span>-->
<!--        </div>-->
      </section>
      <section class="answer-content">
        <div class="answer-title">
          <img alt="" src="@/assets/reverse/answer-qa.png"/>
          <span>查看答案</span>
        </div>
        <section class="answer-main">
          <div
              v-for="(item, index) in answer.list"
              :key="item.id"
              :class="{ 'subjects-item__error': +item.status === 0 }"
              class="subjects-item"
          >
            <p class="js-subjects-title">
              <span>{{ index + 1 }}.</span>
              <span
                  v-for="(word, wordIndex) in item.title.split(' ')"
                  :key="`${item.id}-${index}-${wordIndex}`"
              >
               <template v-if="Show(word)">
                  <span
                    :id="`spaceBlank-${index}-${wordIndex}`"
                    :data-error="index"
                    class="space-blank"
                  >
                  </span>
              </template>
              <template v-else>
                {{ word }}
              </template>
              </span>
            </p>
            <p><span>正确答案：</span>{{ item.isKeyword }}</p>
            <p><span>句子翻译：</span>{{ item.translation }}</p>
          </div>
        </section>
      </section>
    </div>
  </div>
</template>
<script>

import {grammarPracticeResult} from "@/api/reverse";
import {mapState} from "vuex";
import $ from "jquery";

export default {
  components: {},
  data() {
    return {
      answer: {},
      data:'',
      indexInfo:'',
    };
  },
  computed: {
    ...mapState(["reverseStatus"]),
  },
  watch: {},
  methods: {
    Show(str){
      let s = str.split("##");
      if (s.length >= 2){
        return true
      }else {
        return false
      }
    },
    goQuit() {
      // alert('123123')
      // this.$router.replace("/reverse/grammar-test");
    },
    getCorrectWordForItem(i, k) {
      const isKeyword = this.answer.list[i].isKeyword || '';
      const trueWords = isKeyword;
      if (trueWords[k]) {
        return trueWords[k].trim();
      } else {
        return '';
      }

    },
  },
  async created() {
   await grammarPracticeResult({
     courseId:this.reverseStatus.curr_id,
     userId:this.reverseStatus.userId,
     packageId:this.reverseStatus.packageId,
   }).then((res)=>{
     this.answer = res.data;
   })
    // lastAnswer({
    //   chapter_id: this.reverseStatus.chapters_id,
    // }).then((res) => {
    //   if (res.code === SUCCESS_CODE) {
    // this.answer = res.data;
    //   }
    // });
  },
  mounted() {
  },
  beforeCreate() {
  },
  beforeMount() {
  },
  beforeUpdate() {
  },
  updated() {
    this.$nextTick(() => {
      let titles = $(".answer-main .js-subjects-title");
      titles.each((i, v) => {
        $(v)
            .find(".space-blank")
            .each((k, text) => {
              // 筛选错误的句子
              let errorIds = this.answer.pinfo.practice.map((v) => v.id);
              let subjectItems = this.answer.list.filter((v) => {
                return errorIds.includes(v.id.toString());
              });
              let trueWords = subjectItems.map((v) => v.isKeyword.split(","));
              let trueWord = trueWords[i][k];
              let val = this.answer.pinfo.practice[i].keyword[k].trim().replace(/\s+/g, ' ');
              $(text).text(val);
              if (!val.toLowerCase().replace(/\s\s*/g, " ").includes(trueWord.toLowerCase())) {
                $(text).css({
                  color: "#FF604B",
                });
              } else {
                $(text).css({
                  color: "#27BFA3",
                });
              }
            });
      });
    });
  },
  beforeRouteLeave(to, from, next) {
    // console.log(to)
    // console.log(from)
    this.$confirm('确认退出吗, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      next();
    }).catch(() => {
    });
  },
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
@import url("index.css");

.answer-title {
  text-align: center;
}
</style>
